<template>
<div>
    <template v-if="type=='title'">
      <div style="font-size: 0.65rem;padding: 0 0.75rem 0 0.75rem;background-color: #fff;height: 2.5rem;line-height:2.5rem;color: #ffffff; opacity: 0.97;">
        <span class="tabs-title" v-for="(item,index) in tablist" :class="{'tabs-title-active':index==tabindex}" @click="tab(index)" :style="{paddingLeft:'0',width:tablist.length>0?1/tablist.length*95+'%':''}">{{item.title}}</span>
        <!--<span style="float: right;" @click="rightFunc"  :style="{'color':rightColor}" >{{rightName}}<span class="qs-triangle-down"></span></span>-->
      </div>
    </template>
    <template v-else>
      <div v-if="tablist.length>=5" class="tabs-normal tabs-more" :class="{normal:type=='normal',pills:type=='pills'}" style="white-space:nowrap;">
        <div class="tabs-x" id="tabs-x" >
          <div v-for="(item,index) in tablist" class="tabs-x-more tab" :class="{active:index==tabindex}"  @click="tab(index)" style="display:inline;">{{item.title}}</div>
        </div>
      </div>
      <div v-else class="tabs-normal tabs-less" :class="{normal:type=='normal',pills:type=='pills'}">
        <div v-for="(item,index) in tablist" class="tab" :class='{active:index==tabindex}'  @click="tab(index)" :style="{width:tablist.length>0?1/tablist.length*100+'%':''}">{{item.title}}</div>
      </div>
    </template>
    <div class="tabs-content">

        <slot></slot>

    </div>
</div>
</template>

<script>
	export default{
		name:'Tabs',
		props: {
			type:{type: String, default: "normal"},
      act:{type:[Number,String],required: 0}
		},
		data(){
			return{
				tabindex:null,
        num:null,
				tablist:[]
			}
		},
		mounted(){
			this.tabindex=this.act
      this.num = 0
      let children = this.$children
      children.map((key,c)=>{
        this.num = this.num+1
        this.tablist.push({
              "title": key.title,
              "active": key.active
        })
      })
      this.$children[this.act].active=true
		},
  		methods: {
    		tab(num) {
    			this.tabindex=num
    			this.$children.forEach(c=>{
    				c.active=false
    			})
    			this.$children[num].active=true
          this.$emit('tba-msg', this.tabindex)
    		}
  		}

	}
</script>
<style>
  .tabs-title{
    text-align: center;
    display: inline-block;
    height: 1.2rem;
    line-height: 1.2rem;
    border-radius: 1rem;
    margin-right: 0.05rem;
    font-size: 0.65rem;
    color: #656B6F;
  }
  .tabs-title-active{
    background: #00aaee;
    font-weight: bold;
    color: #fff;
  }
  .tabs-normal {
    height: 2rem;
    line-height: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #ffffff;
    background-color: #0ae;
  }
  .tabs-normal.normal>.tab.active {
    font-size:0.75rem;
    position: relative;
    height: 2rem;
    line-height: 2rem;
  }
  .tabs-title {
    padding-left: 0.4rem;
    font-size:0.65rem;
    opacity: 0.7;
    font-weight: bold;
  }
  .tabs-more {
    padding-left: 0.4rem;
    font-size:0.65rem;
    opacity: 0.7;
    font-weight: bold;
  }
  .tabs-less {
    font-size:0.7rem;
    opacity: 0.7;
    font-weight: bold;
  }
  .tabs-normal.normal>.tab {
    /*position: relative;*/
    text-align: center;
    background-color: #0ae;
    height: 2rem;
    color: #ffffff;
    line-height: 2rem;
    font-size:0.7rem;
    font-weight: bold;
  }
  .tabs-normal>.tab {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*font-size: 1em;*/
    cursor: pointer;
  }
  .tabs-normal.normal>.tab.active:after {
    content: '';
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.15rem;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }
  .tabs-normal.normal>.tabs-x {
    overflow-x:auto;
  }
  .tabs-x-more {
    width: 2.8rem;
    margin-right:0.8rem;
    color: #fff;
    font-size:0.65rem;
    opacity: 0.7;
    font-weight: bold;
  }
  .tabs-normal.normal>.tabs-x>.tab.active {
    font-size:0.7rem;
    position: relative;
    height: 2rem;
    line-height: 2rem;
    color: #fff;
    opacity: 1.0;
  }
  .tabs-normal.normal>.tabs-x>.tab.active:after {
    content: '';
    position: absolute;
    background-color: #ffffff;
    bottom: -0.65rem;
    width: 2.8rem;
    left: 0;
    right: 0;
    height: 0.15rem;
    opacity: 1.0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
  }

</style>
